<template>
    <main class="container p-4">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 文章数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1699865769161" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6627" width="200" height="200">
                        <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="6628"></path>
                        <path
                            d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
                            fill="#FFAA44" p-id="6629"></path>
                        <path
                            d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
                            fill="#FF7744" p-id="6630"></path>
                        <path
                            d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                            fill="#FFFFFF" p-id="6631"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">文章</h2>
                        <CountTo :value="articleTotalCount"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 分类数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1730472917069" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="13201" width="200" height="200">
                        <path
                            d="M269.691785 66.087931C152.597296 66.087931 57.677643 161.007584 57.677643 278.102073s94.919653 212.014142 212.014142 212.014142 212.014142-94.919653 212.014142-212.014142-94.919653-212.014142-212.014142-212.014142z m484.615543 424.028284c117.094489 0 212.015029-94.919653 212.015029-212.014142S871.401816 66.087931 754.307328 66.087931s-212.014142 94.919653-212.014143 212.014142 94.919653 212.014142 212.014143 212.014142zM269.691785 533.88201C152.597296 533.88201 57.677643 628.801664 57.677643 745.896153s94.919653 212.012367 212.014142 212.012367S481.705927 862.990641 481.705927 745.896153c0-117.094489-94.919653-212.014142-212.014142-212.014143z m484.615543 424.02651c117.094489 0 212.015029-94.917879 212.015029-212.012367 0-117.094489-94.920541-212.014142-212.015029-212.014143s-212.014142 94.919653-212.014143 212.014143 94.919653 212.012367 212.014143 212.012367z"
                            fill="#88B6FF" p-id="13202"></path>
                        <path
                            d="M355.952693 297.839362c-29.628562 0-53.649081 24.02052-53.649081 53.649082s24.02052 53.640208 53.649081 53.640208 53.640208-24.011646 53.640208-53.640208-24.011646-53.649081-53.640208-53.649082z m365.740146 53.649082c0 29.628562-24.011646 53.640208-53.640208 53.640208s-53.649081-24.011646-53.649082-53.640208 24.02052-53.649081 53.649082-53.649082 53.640208 24.02052 53.640208 53.649082zM355.952693 618.868686c-29.628562 0-53.649081 24.02052-53.649081 53.649082s24.02052 53.640208 53.649081 53.640208 53.640208-24.011646 53.640208-53.640208-24.011646-53.649081-53.640208-53.649082z"
                            fill="#FFFFFF" p-id="13203"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">分类</h2>
                        <CountTo :value="categoryTotalCount"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 标签数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1730473035470" class="icon w-10 h-10" viewBox="0 0 1060 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="23066" width="200" height="200">
                        <path
                            d="M992.512591 333.751271L627.279282 122.883497c-37.821381-21.835375-86.182236-8.877606-108.018874 28.943775L258.280252 603.857808c-31.836889 55.142184 11.457542 123.626034 75.013879 119.76939 87.04474-5.281102 181.618397-9.386522 192.44453-3.135576 10.847601 6.262311 54.725454 90.525065 93.728833 168.674519 28.433596 56.970744 109.171826 59.776724 141.008715 4.63454l260.980156-452.030536c21.835375-37.821381 8.877606-86.183498-28.943774-108.018874z"
                            fill="#C98FFF" p-id="23067"></path>
                        <path
                            d="M687.087577 0H108.487379C48.571745 0 0 48.571745 0 108.488642v716.102069c0 87.355393 98.418936 139.026092 171.287288 90.84582C271.085221 849.450534 380.635892 779.698816 397.787478 779.698816c17.184419 0 127.118987 70.01691 227.068458 136.114035C697.720499 963.998174 795.574956 911.946104 795.574956 824.590711V108.487379C795.574956 48.571745 747.00321 0 687.087577 0zM282.871095 199.525148h229.832765c24.41026 0 44.198609 19.788349 44.198609 44.198608s-19.788349 44.198609-44.198609 44.198609H282.871095c-24.41026 0-44.198609-19.788349-44.198608-44.198609s19.788349-44.198609 44.198608-44.198608z"
                            fill="#E2C8FA" opacity=".9" p-id="23068"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">标签</h2>
                        <CountTo :value="tagTotalCount"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 总浏览量 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1730471896390" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6935" width="200" height="200">
                        <path
                            d="M412.299636 13.358545a46.545455 46.545455 0 0 0-16.011636 2.141091c0 166.912-142.475636 307.2-142.475636 307.2a356.770909 356.770909 0 0 1-94.999273-43.892363 427.938909 427.938909 0 0 0-94.999273 482.676363C142.289455 939.52 324.142545 1024 502.690909 1024c167.889455 0 332.846545-74.891636 405.690182-217.134545C1069.149091 492.730182 876.823273 190.836364 777.588364 190.836364h-1.303273c20.526545 86.853818-44.776727 87.738182-47.429818 87.738181-175.057455-238.917818-278.993455-265.309091-316.509091-265.30909z"
                            fill="#FCE8F0" p-id="6936"></path>
                        <path
                            d="M359.517091 476.625455a38.074182 38.074182 0 0 0-39.191273 36.817454v35.793455a39.284364 39.284364 0 0 0 78.382546 0v-35.793455a38.074182 38.074182 0 0 0-39.191273-36.817454z m345.088 72.610909v-35.793455a39.284364 39.284364 0 0 0-78.382546 0v35.793455a39.284364 39.284364 0 0 0 78.382546 0z m-303.290182 144.011636a134.981818 134.981818 0 0 0 108.078546 57.250909 137.216 137.216 0 0 0 108.63709-56.971636 35.281455 35.281455 0 0 0-11.589818-50.362182 41.053091 41.053091 0 0 0-54.132363 10.333091 59.159273 59.159273 0 0 1-42.868364 23.272727 55.854545 55.854545 0 0 1-41.890909-22.807273 40.680727 40.680727 0 0 0-53.76-11.496727 35.514182 35.514182 0 0 0-12.613818 50.688zM439.901091 65.861818c40.448 15.406545 123.904 67.072 250.368 239.662546a47.802182 47.802182 0 0 0 38.586182 19.316363 102.4 102.4 0 0 0 76.381091-35.653818 93.928727 93.928727 0 0 0 13.963636-23.738182 276.712727 276.712727 0 0 1 35.328 45.381818 480.256 480.256 0 0 1 11.450182 475.787637c-60.509091 118.225455-199.773091 191.627636-363.380364 191.627636-141.125818 0-319.115636-61.672727-395.357091-234.728727a368.779636 368.779636 0 0 1 61.905455-404.945455 374.970182 374.970182 0 0 0 71.912727 28.625455 48.453818 48.453818 0 0 0 12.753455 1.722182 47.941818 47.941818 0 0 0 33.605818-13.684364 571.950545 571.950545 0 0 0 152.482909-289.373091M412.299636 13.358545a46.545455 46.545455 0 0 0-16.011636 2.141091c0 166.912-142.475636 307.2-142.475636 307.2a356.770909 356.770909 0 0 1-94.999273-43.892363 427.938909 427.938909 0 0 0-94.999273 482.676363C142.289455 939.52 324.142545 1024 502.690909 1024c167.889455 0 332.846545-74.891636 405.690182-217.134545C1069.149091 492.730182 876.823273 190.836364 777.588364 190.836364h-1.303273c20.526545 86.853818-44.776727 87.738182-47.429818 87.738181-175.057455-238.917818-278.993455-265.309091-316.509091-265.30909zM359.517091 476.625455a38.074182 38.074182 0 0 0-39.191273 36.817454v35.793455a39.284364 39.284364 0 0 0 78.382546 0v-35.793455a38.074182 38.074182 0 0 0-39.191273-36.817454z m345.088 72.610909v-35.793455a39.284364 39.284364 0 0 0-78.382546 0v35.793455a39.284364 39.284364 0 0 0 78.382546 0z m-303.290182 144.011636a134.981818 134.981818 0 0 0 108.078546 57.250909 137.216 137.216 0 0 0 108.63709-56.971636 35.281455 35.281455 0 0 0-11.589818-50.362182 41.053091 41.053091 0 0 0-54.132363 10.333091 59.159273 59.159273 0 0 1-42.868364 23.272727 55.854545 55.854545 0 0 1-41.890909-22.807273 40.680727 40.680727 0 0 0-53.76-11.496727 35.514182 35.514182 0 0 0-12.613818 50.688z"
                            fill="#E52270" p-id="6937"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">总浏览量</h2>
                        <CountTo :value="pvTotalCount"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 文章发布热点图 -->
            <div class="col-span-4 md:col-span-4">
                <!-- 卡片 -->
                <div
                    class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <h2 class="flex items-center mb-2 font-bold text-gray-900 uppercase dark:text-white">
                        <!-- 日历图标 -->
                        <svg t="1699867752559" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="43935" width="200" height="200">
                            <path
                                d="M897.9 369.2H205c-33.8 0-61.4-27.6-61.4-61.4s27.6-61.4 61.4-61.4h692.9c33.8 0 61.4 27.6 61.4 61.4s-27.6 61.4-61.4 61.4z"
                                fill="#FFB89A" p-id="43936"></path>
                            <path
                                d="M807 171H703.3c-16.6 0-30 13.4-30 30s13.4 30 30 30H807c31.6 0 57.4 24 57.4 53.4v42.3H125.2v-42.3c0-29.5 25.7-53.4 57.4-53.4H293c16.6 0 30-13.4 30-30s-13.4-30-30-30H182.5c-64.7 0-117.4 50.9-117.4 113.4v527.7c0 62.5 52.7 113.4 117.4 113.4H807c64.7 0 117.4-50.9 117.4-113.4V284.5c0-62.6-52.7-113.5-117.4-113.5z m0 694.6H182.5c-31.6 0-57.4-24-57.4-53.4V386.8h739.2v425.4c0.1 29.5-25.7 53.4-57.3 53.4z"
                                fill="#45484C" p-id="43937"></path>
                            <path
                                d="M447.6 217.1c-12.4-6.1-27-2.8-35.7 7.1-2.2-6.7-4-16.2-4-28.1 0-13 2.2-23 4.6-29.8 9.5 8.1 23.5 9.6 34.9 2.8 14.2-8.5 18.8-27 10.3-41.2-15.5-25.9-35.9-29.7-46.6-29.7-36.6 0-63.1 41.2-63.1 97.8s26.4 98 63 98c20.6 0 39-13.4 50.4-36.7 7.3-14.9 1.1-32.9-13.8-40.2zM635.9 218.5c-12.4-6.1-27-2.8-35.7 7.1-2.2-6.7-4-16.2-4-28.1 0-13 2.2-23 4.6-29.8 9.5 8.1 23.5 9.6 34.9 2.8 14.2-8.5 18.8-27 10.3-41.2-15.5-25.9-35.9-29.7-46.6-29.7-36.6 0-63.1 41.2-63.1 97.8s26.5 97.8 63.1 97.8c20.6 0 39-13.4 50.4-36.7 7.1-14.7 0.9-32.7-13.9-40z"
                                fill="#45484C" p-id="43938"></path>
                            <path
                                d="M700.2 514.5H200.5c-16.6 0-30 13.4-30 30s13.4 30 30 30h499.7c16.6 0 30-13.4 30-30s-13.5-30-30-30zM668.4 689.8h-74c-16.6 0-30 13.4-30 30s13.4 30 30 30h74c16.6 0 30-13.4 30-30s-13.4-30-30-30zM479.3 689.8H200.5c-16.6 0-30 13.4-30 30s13.4 30 30 30h278.8c16.6 0 30-13.4 30-30s-13.4-30-30-30z"
                                fill="#33CC99" p-id="43939"></path>
                        </svg>
                        每日文章发布热点图
                    </h2>
                    <div>
                        <ArticlePublishCalendar :value="publishArticleData"></ArticlePublishCalendar>
                    </div>
                </div>
            </div>

            <!-- 文章日 PV 访问量折线图 -->
            <div class="col-span-4 md:col-span-4">
                <!-- 卡片 -->
                <div
                    class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
                        <!-- 折线图标 -->
                        <svg t="1699872552774" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="58226" width="200" height="200">
                            <path
                                d="M629.892 323.414c-6.226-11.274-18.33-18.156-31.126-17.914-12.796 0.242-24.554 7.608-30.086 19.124l-143.52 286.87-63.29-115.164c-6.224-11.032-17.982-17.914-30.432-17.914h-60.52c-19.022 0-34.584 15.494-34.584 34.584 0 19.09 15.56 34.584 34.582 34.584h40.118l85.074 155c6.226 11.276 18.33 18.158 31.126 17.916 12.796-0.242 24.554-7.608 30.086-19.124l143.52-286.87 63.29 115.164c6.224 11.032 17.982 17.914 30.432 17.914h60.52c19.022 0 34.584-15.494 34.584-34.584 0-19.09-15.56-34.584-34.582-34.584h-40.118l-85.074-155z"
                                fill="#767BFA" p-id="58227"></path>
                            <path
                                d="M513 98C854.684 98 928 171.248 928 513S854.684 928 513 928C171.316 928 98 854.752 98 513S171.316 98 513 98z m0 69.166c-83.692 0-146.634 4.6-194.012 15.148-46.688 10.376-74.354 25.592-92.684 43.92-18.33 18.364-33.546 46.032-43.92 92.754-10.72 47.482-15.218 110.148-15.218 194.012s4.496 146.53 15.218 194.012c10.374 46.722 25.59 74.39 43.92 92.754 18.33 18.328 45.996 33.544 92.684 43.92 47.38 10.548 110.32 15.148 194.012 15.148 83.692 0 146.634-4.6 194.012-15.148 46.688-10.376 74.354-25.592 92.684-43.92 18.328-18.364 33.546-46.032 43.92-92.754 10.72-47.482 15.218-110.148 15.218-194.012s-4.496-146.53-15.218-194.012c-10.374-46.722-25.592-74.39-43.92-92.752-18.33-18.33-45.996-33.546-92.684-43.92-47.38-10.55-110.32-15.15-194.012-15.15z"
                                fill="#ABAFD1" p-id="58228"></path>
                        </svg>
                        近一周 PV 访问量
                    </h2>
                    <div>
                        <ArticlePvLineBarChat :value="pvData"></ArticlePvLineBarChat>
                    </div>
                </div>
            </div>
        </div>

    </main>
</template>

<script setup>
import { getArticlePublishDataForOneYear, getArticlePvDataForWeek, getDashBoardStatisticsInfo } from '@/api/admin/dashboard';
import { showMessage } from '@/composables/utils';
import { ref, reactive } from 'vue';
import CountTo from '@/components/CountTo.vue'; // 导入自定义组件Count 里面定制了数字变化动画 基于gasp实现
import ArticlePublishCalendar from '@/components/ArticlePublishCalendar.vue';
import ArticlePvLineBarChat from '@/components/ArticlePvLineBarChat.vue';

// 页面基本统计数据
// 总文章数
const articleTotalCount = ref(0)
const categoryTotalCount = ref(0)
const tagTotalCount = ref(0)
const pvTotalCount = ref(0)

// 获取基本统计数据
const getBaseStatistics = () => {
    // 发送请求
    getDashBoardStatisticsInfo().then((res) => {
        if (res.success == true) {
            articleTotalCount.value = res.data.articleTotalCount
            categoryTotalCount.value = res.data.categoryTotalCount
            tagTotalCount.value = res.data.tagTotalCount
            pvTotalCount.value = res.data.pvTotalCount
        } else {
            showMessage(res.message, 'error')
        }
    })
}
getBaseStatistics()
const publishArticleData = ref({})
// 获取近一年文章发布数据
const getArticlePublishData = () => {
    getArticlePublishDataForOneYear().then((res) => {
        if (res.success == true) {
            publishArticleData.value = res.data
        } else {
            showMessage(res.message, 'error')
        }
    })
}
getArticlePublishData()
const pvData = ref({})
// 获取近一星期文章点击数据
const getArticlePvData = () => {
    getArticlePvDataForWeek().then((res) => {
        if (res.success == true) {
            pvData.value = res.data
        } else {
            showMessage(res.message, 'error')
        }
    })
}
getArticlePvData()
</script>